<template>
  <div class="aoto">
    <div class="at">
      <div class="list">
        <div class="list_in" v-for="(item, index) in gigi" :key="index">
          <div
            class="back"
            :style="{ backgroundImage: `url(${item.url})` }"
          ></div>
          <p>{{ item.name }}</p>
        </div>
      </div>
      <div class="center">
        <div class="enve">
          <div class="left">
            <h2>新人专享</h2>
            <div class="yuan">
              <p>109</p>
              <span>元</span>
              <img src="../../imgytt/hongbao.png" alt="" />
            </div>
            <div class="come">
              <h5>点击领取</h5>
            </div>
          </div>
          <div class="ban"></div>
          <div class="right">
            <div class="lang">
              <div class="ss" @scroll="tabscroll"  :style="{transform: `translateX(${all}px)`}" @mouseenter="enter" @mouseleave="leave">
                <div class="li"   v-for="(item, index) in oi"
                    :key="index" @click="fun(index)">
                  <div
                    class="background"
                    :style="{ backgroundImage: `url(${item.url})` }"
                  ></div>
                  <div class="tejia" >新人特价</div>
                </div>
            </div>
          </div>
          </div>
        </div>
      </div>
      <div class="nav_li">
        <ul>
          <li v-for="item in infor" :key="item.id">{{ item.name }}</li>
        </ul>
      </div>
      <div class="shopping">
        <div class="auto">
          <div class="boo" v-for="(item, index) in infor" :key="index">
            <div
              class="tu"
              :style="{ backgroundImage: `url(${item.url})` }"
            ></div>
            <div class="write">
              <p>
                okokokokokokokokokokokokookokokokokokokokokokokokookokokokokokokokokokokokookokokokokokokokokokokokookokokokokokokokokokokoko
              </p>
              <div class="money">
                <i>￥</i>
                <span
                  >123.
                  <span>43</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "shopping_ij",
};
</script>
<script setup>
import { reactive,ref } from "vue";
let infor = reactive([
  {
    name: "热卖推荐",
    url: require("../../imgytt/lingshi1.png"),
  },
  {
    name: "新品尝试",
    url: require("../../imgytt/lingshi.png"),
  },
  {
    name: "低价便宜",
    url: require("../../imgytt/linshi2.jpg"),
  },
  {
    name: "进口大牌",
    url: require("../../imgytt/linshi3.webp"),
  },
]);
let gigi = reactive([
  {
    url: require("../../imgytt/liangshi.png"),
    name: "宠物粮食",
  },
  {
    url: require("../../imgytt/ningshi.png"),
    name: "宠物零食",
  },
  {
    url: require("../../imgytt/wanju.png"),
    name: "宠物玩具",
  },
  {
    url: require("../../imgytt/huli.png"),
    name: "宠物护理",
  },
  {
    url: require("../../imgytt/qinli.png"),
    name: "宠物清理",
  },
  {
    url: require("../../imgytt/yaowu.png"),
    name: "宠物药物",
  },
  {
    url: require("../../imgytt/baojian.png"),
    name: "宠物保健",
  },
  {
    url: require("../../imgytt/more.png"),
    name: "宠物更多",
  },
]);
let oi = reactive([
  {
    url: require("../../imgytt/xinren1.png"),
  },
  {
    url: require("../../imgytt/xinren.png"),
  },
  {
    url: require("../../imgytt/xinren1.png"),
  },
  {
    url: require("../../imgytt/xinren.png"),
  },
  {
    url: require("../../imgytt/xinren1.png"),
  },
]);
let active = ref(1);
let all=ref(1)
function lunbo() {
  let next = active.value >=25? active=ref(0) : active.value++;
  // active.value++
  // console.log(active.value );
  // console.log(next);
  all.value = next * -10;
  // console.log(active.value <= 1 ? active.value++ : (active.value = 2));
}
let time=setInterval(lunbo,200)
function enter(){
  clearInterval(time)
}
function leave(){
  time=setInterval(lunbo,500)

}
</script>

<style lang="less" scoped>
.aoto {
  width: 25.9375rem;
}
.at {
  width: 25.125rem;
  margin: 0 auto;
}
.list {
  width: 25.125rem;
  height: 15.5rem;
  // background: red;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .list_in {
    float: left;
    width: 5.0625rem;
    // height: 6.25rem;
    // background: #efeef0;
    margin-bottom: 5px;
    position: relative;

    .back {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      margin: auto;
      width: 4.6875rem;
      height: 4.6875rem;
      border-radius: 50%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
    p {
      margin: auto;
      position: absolute;
      bottom: 9px;
      left: .75rem;
      right: 0;
      font-size: .875rem;
      color: #000000;
      font-weight: bold;
      font-family: "Ping Fang  SC  Bold";
    }
  }
}
.center {
  width: 25.125rem;
}
.enve {
  position: relative;
  margin: 0 auto;
  width: 25.125rem;
  height: 10.5625rem;
  border-radius: 1.1875rem;
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #fbdfe7 47%,
    #ff3e74 100%
  );
  .left {
    float: left;
    .yuan {
      position: relative;
      height: 4.5rem;
      width: 13.5rem;
      top: -0.625rem;
      span {
        z-index: 2;
        float: left;
        margin-top: 2.375rem;
      }
    }
    h2 {
      text-align: center;
      margin-top: .625rem;
    }
    h2,
    span {
      font-size: 1.75rem;
      letter-spacing: .6875rem;
      color: #000000;
      font-weight: bold;
      font-family: "Ping Fang  SC  Bold";
    }

    p {
      float: left;
      font-size: 4.5rem;
      color: #0e0e0e;
      font-weight: bold;
      font-style: italic;
      font-family: "Aparajita";
    }
    img {
      float: left;
      position: absolute;
      top: .0625rem;
      right: -0.5625rem;
      transform: scale(0.8);
    }
    .come {
      position: relative;
      width: 8.6875rem;
      height: 2.1875rem;
      margin: 0 auto;
      border-radius: 1.125rem;
      background-color: #ffffff;
      h5 {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 5rem;
        height: 1.625rem;
        font-size: 1.25rem;
        letter-spacing: 0px;
        color: #ff0000;
        font-weight: bold;
        font-family: "Ping Fang  SC  Bold";
      }
    }
  }
  .ban {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    margin: auto;
    width: .5625rem;
    height: 4.875rem;
    margin-left: .625rem;
    background: url(../../imgytt/texiao.png) no-repeat;
  }
  .right {
    float: right;
    position: relative;
    width: 10.3125rem;
    height: 100%;
    .lang {
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      height: 7.3125rem;
      width: 10.3125rem;
      overflow: hidden;
      .ss{
        width: 32.75rem;
        height: 100%;
        transition:all 400ms;
        overflow-x: scroll;
        .li{
          display: inline-block;
          margin-left: .625rem;

        }
        .tejia{
          text-align: center;
        }
      }
      .background {
        width: 5.875rem;
        height: 5.875rem;
        border-radius: .9375rem;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
    }
  }
}
.nav_li {
  width: 25.125rem;
  height: 2.5rem;
  line-height: 2.5rem;
  ul {
    display: flex;
    justify-content: space-around;
    li {
      float: left;
      font-size: 1.125rem;
      color: #000000;
      font-weight: bold;
      font-family: "Ping Fang  SC  Bold";
      list-style: none;
    }
  }
}
.shopping {
  width: 25.125rem;
  height: 43rem;
  .auto {
    margin: 0 auto;
  }
  .boo {
    float: left;
    width: 11rem;
    height: 17.1875rem;
    margin: .75rem;
    background: #ffffff;
    position: relative;
    .tu {
      float: left;
      width: 9.4375rem;
      height: 9rem;
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 5rem;
      border-radius: .625rem;
      border: .0625rem solid #efeef0;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
    .write {
      position: absolute;
      bottom: 1.25rem;
      left: 0;
      right: 0;
      margin: auto;
      width: 8.6875rem;
      float: left;
      padding: 0 .3125rem;
      height: 4.1875rem;
      p {
        overflow: hidden;
        width: 8.6875rem;
        height: 2.5rem;
        font-size: .875rem;
        line-height: 1.25rem;
        text-align: left;
        color: #666;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
.money {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.125rem;
  height: 1.125rem;
  color: #e1251b;
  margin-top: .625rem;
  i {
    font-style: normal;
    margin-right: .1875rem;
    vertical-align: middle;
    font-size: .75rem;
    font-weight: 700;
    font-family: MicrosoftYahei-regular, Arial, Helvetica, sans-serif;
  }
  span {
    font-size: 1rem;
    font-weight: 700;
    font-family: arial, sans-serif;
    span {
      font-size: .75rem;
    }
  }
}
</style>